<template>
  <div id="app" class="background-gradient">
    <!-- 内容容器 -->
    <div class="content">
      <!-- 区域 1 -->
      <section class="section" style="margin-top: 20px">
        <!-- 1.1 区域 -->
        <div class="section-header">
          <h2>我的待办</h2>
          <input class="input-box" type="text" value="更多 >" readonly />
        </div>
        <!-- 1.2 区域 -->
        <div class="section-body">
          <div class="item">
            <div class="item-top">考勤审批</div>
            <div class="item-bottom">
              2024/02/11-阳泉D4模组H800集群布线集成服务
              <img
                src="@/assets/xiangmujindu/arrow_right.png"
                alt="icon"
                class="icon"
              />
            </div>
          </div>
          <div class="divider"></div>
          <div class="item">
            <div class="item-top">考勤审批</div>
            <div class="item-bottom">
              2024/05/21-阳泉D4模组H800集群布线集成服务
              <img
                src="@/assets/xiangmujindu/arrow_right.png"
                alt="icon"
                class="icon"
              />
            </div>
          </div>
          <div class="divider"></div>
          <div class="item">
            <div class="item-top">考勤审批</div>
            <div class="item-bottom">
              2024/09/12-阳泉D4模组H800集群布线集成服务
              <img
                src="@/assets/xiangmujindu/arrow_right.png"
                alt="icon"
                class="icon"
              />
            </div>
          </div>
        </div>
      </section>

      <!-- 区域 2 -->
      <section class="section" style="margin-top: 20px">
        <div class="section-header">
          <h2>我的项目</h2>
        </div>
        <div class="section-body">
          <!-- 顶部两个tab按钮 -->
          <div class="tabs">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              class="tab"
              :class="{ active: selectedTab === index }"
              @click="selectTab(index)"
            >
              {{ tab }}
            </div>
          </div>
          <div class="divider"></div>

          <!-- 5个tab按钮 -->
          <div class="sub-tabs">
            <div
              v-for="(subTab, index) in subTabs"
              :key="index"
              class="sub-tab"
              :class="{ active: selectedSubTab === index }"
              @click="selectSubTab(index)"
            >
              {{ subTab }}
            </div>
          </div>
          <div class="divider"></div>

          <!-- 2.3 项目详情 -->
          <div class="project-detail">
            <!-- 第一行 -->
            <div class="info-row">
              <span class="tag">布线</span>
              <span class="info-text">项目编号：7012193</span>
              <span class="status">筹备中</span>
            </div>
            <div class="divider"></div>
            <!-- 第二行 -->
            <div class="info-details">
                
              <div class="bold">项目名称: 阳泉D4模组H800集群布线集成服务</div>
              <div class="info-detail">计划时间: 2024-09-18 至2024-09-30</div>
              <div class="info-detail">机房编号: NA63</div>
              <div class="info-detail">机房地址: 北京市海淀区玉泉慧谷2期</div>
              <div class="info-detail">整包公司: 广州锦帏信息网络工程技术有限公司</div>
            </div>
            <div class="divider"></div>
            <!-- 第三行 -->
            <div class="actions">
              <div>
                <img class="icon" src="@/assets/xiangmujindu/icon_phone.png" alt="phone" />
              <span class="bold">售前经理</span></div>
              <button class="dispatch-btn" @click="goTo">派工</button>
              <button class="complete-btn" @click="goTo('jiedan.vue')">
                结单
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 区域 3 -->
      <footer class="footer">
        <div class="footer-button" @click="goToIndex">
          <img src="@/assets/xiangmujindu/tab_home_select.png" alt="icon" />
          <span>首页</span>
        </div>
        <div class="footer-button">
          <img src="@/assets/xiangmujindu/tab_my_unselected.png" alt="icon" />
          <span>我的</span>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: "tab1", // 当前选中的 Tab
      selectedHorizontalTab: 0, // 当前选中的横向按钮
      tabs: ["我负责的", "我参与的"],
      selectedTab: 0,
      selectedSubTab: 0,

      subTabs: ["全部", "筹备中", "实施中", "已完成", "异常"],
    };
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index;
    },
    selectSubTab(index) {
      this.selectedSubTab = index;
    },
    goToJiedan(page) {
      this.$router.push({ path: page });
    },
    goToIndex() {
      this.$router.push("/index");
    },
    goTo(vuePage) {
      this.$router.push({path:'/xiangmuguanli/'+vuePage});
    },
  },
};
</script>

<style scoped>
/* 渐变背景 */
.background-gradient {
  width: 100%;
  height: 30%;
  background: linear-gradient(to right, #f0effd, #ebf9f9);
}
.content {
  padding: 5px;
}

/* 区域结构 */
.section {
  margin-bottom: 20px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-header h2 {
  margin: 0;
}
.input-box {
  color: #9d9e9f;
  border: none;
  background: none;
  outline: none;
  text-align: right;
}

/* 白色圆弧背景 */
.section-body {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}

/* 分隔线 */
.divider {
  height: 1px;
  background: #f4f5f9;
  margin: 10px 0;
}

/* 列表项样式 */
.item {
  padding: 0px;
}
.item-top {
  background: #98c355;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  width: 60px;
  font-size: 13px;
  text-align: center;
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9d9e9f;
  padding: 5px 0;
  white-space: nowrap;
}

/* 图标 */
.icon {
  width: 26px;
  height: 26px;
  padding: 0px 3px;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: flex-start;
}
.tab {
  width: 100px;
  text-align: center;
  font-size: 18px;
  padding: 10px 0;
  cursor: pointer;
}
.tab.active {
  font-weight: bold;
  color: #7e9b4f;
  border-bottom: 2px solid #7e9b4f;
}
.sub-tabs {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}
.sub-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  background: #f4f5f9;
  margin: 2px 2px;
  border-radius: 10px;
}
.sub-tab.active {
  background: #f0f6e8;
  color: #7e9b4f;
}

.tag {
  background: #e49f17;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
}
.info-text {
  color: #9d9e9f;
}
.status {
  color: #da4926;
}
.info-details .bold {
  font-weight: bold;
  padding: 5px 0px;
}
.info-details .info-detail {
  color: #9d9e9f;
  padding: 2px 0px;
}
.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.actions  div{
  display: flex;
  align-items: center;
  width:50%;
}
.dispatch-btn {
  border: 1px solid #98c355;
  color: #98c355;
  padding: 10px 20px;
  float:right;

}
.complete-btn {
  background: #98c355;
  color: #fff;
  padding: 10px 20px;
    border:none;
    float:right;
}

/* Footer */
.footer {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 1000;
}
.footer-button {
  flex: 1;
  text-align: center;
}
.footer-button img {
  width: 30px;
  height: 30px;
}
.footer-button span {
  display: block;
}
</style>
